<template>
  <div class="book-switcher">
    <h3 class="section-title">{{ $t('settings.bookSettings') }}</h3>
    <div class="book-options">
      <div 
        class="book-option" 
        :class="{ active: settingsStore.studyType === 1 }"
        @click="switchStudyType(1)"
      >
        <div class="book-icon">📘</div>
        <div class="book-info">
          <h4>{{ $t('settings.ieltsBook') }}</h4>
          <p>{{ $t('settings.ieltsDescription') }}</p>
        </div>
        <div class="check-icon" v-if="settingsStore.studyType === 1">✓</div>
      </div>
      
      <div 
        class="book-option" 
        :class="{ active: settingsStore.studyType === 2 }"
        @click="switchStudyType(2)"
      >
        <div class="book-icon">📚</div>
        <div class="book-info">
          <h4>{{ $t('settings.toeflBook') }}</h4>
          <p>{{ $t('settings.toeflDescription') }}</p>
        </div>
        <div class="check-icon" v-if="settingsStore.studyType === 2">✓</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useSettingsStore } from '@/stores/settings';
import { useUserStore } from '@/stores/user';
import { onMounted } from 'vue';
import { useI18n } from 'vue-i18n';

const settingsStore = useSettingsStore();
const userStore = useUserStore();
const { t } = useI18n();

onMounted(() => {
  // 初始化设置
  if (!settingsStore.initialized) {
    settingsStore.fetchSettings();
  }
});

const switchStudyType = (studyType) => {
  if (settingsStore.loading) return;
  settingsStore.changeStudyType(studyType);
};
</script>

<style scoped>
.book-switcher {
  margin-bottom: 2rem;
}

.section-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #fff;
  font-weight: 600;
}

.book-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.book-option {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.book-option:hover {
  background: rgba(255, 255, 255, 0.15);
}

.book-option.active {
  border-color: #4A99E9;
  background: rgba(74, 153, 233, 0.1);
}

.book-icon {
  font-size: 2rem;
  margin-right: 1rem;
}

.book-info {
  flex: 1;
}

.book-info h4 {
  margin: 0;
  font-size: 1.2rem;
  color: #fff;
}

.book-info p {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  opacity: 0.7;
  color: #fff;
}

.check-icon {
  color: #4A99E9;
  font-size: 1.5rem;
  font-weight: bold;
}

@media (max-width: 768px) {
  .book-option {
    padding: 0.75rem;
  }
  
  .book-icon {
    font-size: 1.5rem;
  }
  
  .book-info h4 {
    font-size: 1rem;
  }
  
  .book-info p {
    font-size: 0.8rem;
  }
}
</style> 